<script setup>
import {ref} from "vue";

const obj = ref({
  activeNames:[
  ]
});

const props = defineProps({
  notes: {
    type: Array,
    required: true
  },
})
</script>
<template>
  <div class="m-note-info" >
    <van-collapse v-model="obj.activeNames" v-for="note in notes" :key="note.noteId">
      <van-swipe-cell >
        <van-collapse-item :title="note.datetime" :name="note.noteId" >
          <div class="m-note-info__content">
            <div class="m-note-info__content-text" v-text="note.noteContent">
            </div>
            <div class="m-note-info__content-file">
              <van-image
                  v-for="url in note.noteImg"
                  fit="cover"
                  position="left"
                  :src="'http://127.0.0.1:8080/file/url/img/'+url"
              />
            </div>
          </div>
        </van-collapse-item>
        <template #right >
          <van-button class="m-right-btn" type="danger" text="删除" />
        </template>
      </van-swipe-cell>
    </van-collapse>
  </div>
</template>


<style scoped lang="less">
  .m-right-btn{
    height: 100%;
  }
  .m-note-info {
    padding: 0.5rem;
    background-color: #fff;
    border-radius: 0.5rem;
  }

  .m-note-info__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
  }

  .m-note-info__title-text {
    font-size: 1.2rem;
    font-weight: bold;
  }

  .m-note-info__title-time {
    font-size: 0.8rem;
    color: #999;
  }
  .m-note-info__content-file{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    .van-image{
      width: 25vw;
      height: 25vw;
    }
  }
  .m-note-info__content {
    padding: 0.5rem;
  }

  .m-note-info__content-text {
    font-size: 1rem;
  }
</style>
